<template>
<p class="item_box_c_title flex_sb">
    <span style="margin-right:auto">客户联系人</span>
    <el-button plain type="primary" @click="openSnContactsDialog">选择</el-button>
    <el-button plain type="primary" @click="addDialogvisible = true">增加</el-button>
</p>
<div class="item_box_c mb10">
    <el-table :data="contacts">
        <el-table-column label="联系人姓名" prop="linkmanName" align="center"/>
        <el-table-column label="手机" prop="linkmanMobile" align="center"/>
        <el-table-column label="邮箱地址" prop="linkmanMail" align="center"/>
        <el-table-column label="部门" prop="linkmanDept" align="center"/>
        <el-table-column label="职位" prop="linkmanTitle" align="center"/>
        <el-table-column label="电话" prop="linkmanPhone" align="center"/>
        <el-table-column label="传真" prop="linkmanFax" align="center"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="{ row }">
                <el-button link type="primary" @click="deleteRow(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<!-- 选择客户联系人 -->
<CustomContactsDialog v-model:visible="contactsDialogVisible" @confirm="selection"/>
<!-- 增加客户联系人-dialog -->
<el-dialog v-model="addDialogvisible" @close="addDialogClose" title="增加客户联系人" width="60%" append-to-body>
    <el-form ref="addFormRef" class="custom-form" :model="addFormData" :rules="addFormRules" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名" prop="linkmanName">
                <el-input v-model="addFormData.linkmanName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门" prop="linkmanDept">
                <el-input v-model="addFormData.linkmanDept" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职位" prop="linkmanTitle">
                <el-input v-model="addFormData.linkmanTitle" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机" prop="linkmanMobile">
                <el-input v-model="addFormData.linkmanMobile" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱" prop="linkmanMail">
                <el-input v-model="addFormData.linkmanMail" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话" prop="linkmanPhone">
                <el-input v-model="addFormData.linkmanPhone" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="传真" prop="linkmanFax">
                <el-input v-model="addFormData.linkmanFax" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="center">
            <el-button plain @click="addDialogClose">取消</el-button>
            <el-button plain type="primary" @click="saveContacts">确定</el-button>
        </el-row>
    </el-form>
</el-dialog>
</template>
    
<script setup>
import CustomContactsDialog from '@/views/customer/components/CustomContactsDialog.vue'

// 客户联系人
let contactsDialogVisible = ref(false)
const openSnContactsDialog = ()=>{
    contactsDialogVisible.value = true
}
const selection = (arr)=>{
    console.log(arr)
}
const contacts = reactive([
    {
        id: 1,
        linkmanName: '张三',
        linkmanDept: '技术部',
        linkmanTitle: '技术工程师',
        linkmanMobile: '13800138000',
        linkmanMail: '237239@163.com',
        linkmanPhone: '0571-88888888',
        linkmanFax: '2938572948',
    },
    {
        id: 2,
        linkmanName: '张三',
        linkmanDept: '技术部',
        linkmanTitle: '技术工程师',
        linkmanMobile: '13800138000',
        linkmanMail: '237239@163.com',
        linkmanPhone: '0571-88888888',
        linkmanFax: '2938572948',
    },
    {
        id: 3,
        linkmanName: '张三',
        linkmanDept: '技术部',
        linkmanTitle: '技术工程师',
        linkmanMobile: '13800138000',
        linkmanMail: '237239@163.com',
        linkmanPhone: '0571-88888888',
        linkmanFax: '2938572948',
    },
])
const deleteRow = (id) => {
    contacts.splice(contacts.findIndex(item => item.userId === id),1)
}

// 增加联系人
const addDialogvisible = ref(false)
const addFormRef = ref(null)
const addFormRules = {
    linkmanName: [
        { required: true, message: "请输入", trigger: "blur" },
    ],
    linkmanMobile: [
        { required: true, message: "请输入", trigger: "blur" },
    ]
}
const addFormData = reactive({
    linkmanName: '',
    linkmanDept: '',
    linkmanTitle: '',
    linkmanMobile: '',
    linkmanMail: '',
    linkmanPhone: '',
    linkmanFax: '',
})
const addDialogClose = () => {
    addFormRef.value.resetFields()
    addDialogvisible.value = false
}
const saveContacts = () => {
    console.log(addFormRef.value);
    addFormRef.value.validate(valid => {
        if(valid){
            addDialogClose()
        }
    })
}
</script>

<style lang="scss" scoped>

</style>